// 分类管理组件
const categoryManagementComponent = {
    template: `<div class="container">
        <h2>分类管理</h2>
        <div class="category-form">
            <h3>添加新分类</h3>
            <div class="form-group">
                <label>分类名称</label>
                <input type="text" v-model="newCategory.name" placeholder="输入分类名称">
            </div>
            <div class="form-group">
                <label>描述</label>
                <textarea v-model="newCategory.description" placeholder="输入分类描述"></textarea>
            </div>
            <button class="btn" @click="addCategory">添加分类</button>
        </div>

        <div class="category-list-container">
            <div class="category-list">
                <div class="category-item" v-for="category in categories" :key="category.id">
                    <div class="category-details">
                        <h4>{{ category.name }}</h4>
                        <p class="category-description">{{ category.description }}</p>
                    </div>
                    <div class="category-actions">
                        <button class="btn btn-danger" @click="deleteCategory(category.id)">删除</button>
                    </div>
                </div>
                <div v-if="categories.length === 0" class="loading">暂无分类</div>
            </div>
        </div>
    </div>`,
    props: ['appModule'],
    data() {
        return {
            newCategory: { name: '', description: '' }
        };
    },
    computed: {
        categories() {
            return this.appModule && this.appModule.categoryModule ?
                this.appModule.categoryModule.categories : [];
        }
    },
    methods: {
        addCategory() {
            if (!this.newCategory.name) {
                alert('请填写分类名称');
                return;
            }

            if (this.appModule && this.appModule.categoryModule) {
                this.appModule.categoryModule.addCategory(
                    this.newCategory.name,
                    this.newCategory.description
                );
                this.newCategory = { name: '', description: '' };
            }
        },
        deleteCategory(categoryId) {
            if (confirm('确定要删除该分类吗？')) {
                if (this.appModule && this.appModule.categoryModule) {
                    this.appModule.categoryModule.deleteCategory(categoryId);
                }
            }
        }
    }
};

export { categoryManagementComponent };